<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <!--title-->
      <el-row>
        <el-col :span="12">
          <e-heading style="margin-top:0;" :grade="'1'">{{$route.query.id ? '训练方式详情' : '训练方式预览'}}</e-heading>
        </el-col>
      </el-row>
      <!--form-->
      <el-form ref="form" class="addmode_form" v-bind="getFormProps()">
        <!--rules推荐写在html结构-->
        <el-form-item label="运动类型：">
          {{revereSportType(form.sportType)}}
        </el-form-item>
        <el-form-item label="训练名称：">
          {{form.trainingName}}
        </el-form-item>
        <el-form-item label="训练目标：">
          <div v-if="form.trainingAim" v-html="handleFormatTextrea(form.trainingAim)"></div>
          <p v-else>暂无内容</p>
        </el-form-item>
        <e-heading grade="2">重点领域</e-heading>
        <el-form-item label="重点技术领域：">
          <span v-if="form.techDomainInfo == ''">暂无内容</span>
          <el-tag type="success" v-for="(item,index) in form.techDomainInfo.split(';')" :key="index" v-else>{{item}}</el-tag>
        </el-form-item>
        <el-form-item label="重点精神领域：">
          <span v-if="form.mindDomainInfo == ''">暂无内容</span>
          <el-tag type="primary" v-for="(item,index) in form.mindDomainInfo.split(';')" :key="index" v-else>{{item}}</el-tag>
        </el-form-item>
        <e-heading grade="2">具体信息</e-heading>
        <el-form-item label="训练时长：">
          {{form.trainingDuration}}分钟
        </el-form-item>
        <el-form-item label="教学教法：">
          <span v-if="form.teachingInfo == ''">暂无内容</span>
          <el-tag v-for="(item,index) in form.teachingInfo.split(';')" :key="index" v-else>{{item}}</el-tag>
        </el-form-item>
        <el-form-item label="训练次数：">
          {{form.trainingTimes ? form.trainingTimes+'次' : '暂无内容'}}
        </el-form-item>
        <el-form-item label="训练强度：">
          {{[0, 1, 2].includes(form.trainingIntension) ? ['低','中','高'][form.trainingIntension] : '暂无内容'}}
        </el-form-item>
        <el-form-item label="技巧等级：">
          {{[0, 1, 2, 3].includes(form.skillLevel) ? ['初级','中级','高级','顶级'][form.skillLevel] : '暂无内容'}}
        </el-form-item>
        <el-form-item label="适用年龄：">
          {{form.ageInfo ? getAgeList(form.ageInfo) : '暂无内容'}}
        </el-form-item>
        <el-form-item label="学员规模：" class="stud_num">
          {{form.scopeInfo ? getNumList(form.scopeInfo) : '暂无内容'}}
        </el-form-item>
        <el-form-item label="场地规模：">
          <span v-if="form.placeInfo == ''">暂无内容</span>
          <el-tag v-for="(item,index) in form.placeInfo.split(';')" :key="index" v-else>{{item}}</el-tag>
        </el-form-item>
        <div class="line_fg"></div>
        <el-form-item label="所需器材：">
          {{form.trainingTool ? form.trainingTool : '暂无内容'}}
        </el-form-item>
        <el-form-item label="图示及描述：">
          <span v-if="form.imageInfo.length == 0">暂无内容</span>
          <div :class="form.imageInfo.length > 0 ? 'img_card' : ''" v-else>
            <el-row class="img_cardlist" v-for="(item, index) in form.imageInfo" :key="index">
              <el-col :span="8">
                <span v-if="!item.value">暂无图示</span>
                <e-preview-box v-else>
                  <e-swiper height="210px" width="210px" :slides="1">
                    <e-swiper-item v-for="(sitem, sindex) in item.value" :key="sindex">
                        <img :src="sitem">
                    </e-swiper-item>
                  </e-swiper>
                </e-preview-box>
              </el-col>
              <el-col :span="16" style="padding:0 0 0 10px;line-height:2;">
                {{item.name}}
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item label="进阶内容：">
          <div v-if="form.advancedContent" v-html="handleFormatTextrea(form.advancedContent)"></div>
          <p v-else>暂无内容</p>
        </el-form-item>
        <el-form-item label="处理方式：">
          <div v-if="form.processMode" v-html="handleFormatTextrea(form.processMode)"></div>
          <p v-else>暂无内容</p>
        </el-form-item>
        <!--button-->
        <div class="button-box">
          <el-button type="primary" @click="handleClosePage" v-if="!$route.query.id">关 闭</el-button>
          <el-button v-if="$route.query.id || form.auditStatus == 2" @click="handleGoBack">返 回</el-button>
          <el-button type="primary" v-if="form.auditStatus == 0 && roleType != 99" @click="handleSetYes">通 过</el-button>
          <el-button type="primary" v-if="form.auditStatus == 0 && roleType != 99" @click="handleSetNo">拒 绝</el-button>
          <el-button type="primary" v-if="form.auditStatus == 1" @click="handleDetail">编 辑</el-button>
          <el-button type="primary" v-if="form.auditStatus == 1" @click="handleDeLete">删 除</el-button>
          <el-button type="primary" v-if="form.auditStatus == 1" @click="handleResubmit">再次提交</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { form } from 'utils/mixins' // 引入form mixin
import { ModeData } from './modeData'
import {ESwiper, ESwiperItem} from '@e-ui/swiper'
import api from 'api/trainingProgram'
import { mapGetters } from 'vuex'
import { formatTextrea } from 'utils/index'
export default {
  mixins: [form],
  components: {
    ESwiper,
    ESwiperItem
  },
  computed: {
    ...mapGetters({
      mode_sport_list: 'mode_sport_list'
    })
  },
  created () {
    this.getData()
    this.roleType = localStorage.getItem('role_type')
    this.$store.dispatch('mode_sport_list', '')
  },
  data () {
    return {
      loading: false, // 必需要返回loading
      setData: ModeData,
      roleType: '',
      form: {
        id: '',
        sportType: '',
        trainingName: '',
        trainingAim: '',
        techDomainInfo: '',
        mindDomainInfo: '',
        trainingDuration: 0,
        teachingInfo: '',
        trainingTimes: 0,
        trainingIntension: '',
        skillLevel: '',
        ageInfo: '',
        scopeInfo: '',
        placeInfo: '',
        trainingTool: '',
        imageInfo: [],
        advancedContent: '',
        processMode: ''
      }
    }
  },
  methods: {
    handleFormatTextrea (str) {
      return formatTextrea(str)
    },
    getData () {
      if (this.$route.query.id) {
        api.addTrainStyle({id: Number(this.$route.query.id)}, {type: 'GET'}).then((res) => {
          if (res.data) {
            for (let key in res.data) {
              this.$set(this.form, key, res.data[key])
            }
          }
        })
      } else {
        let modeList = JSON.parse(localStorage.getItem('mode_list'))
        for (let key in modeList) {
          if (key === 'scopeInfo') { // 单选是对象类型
            this.form[key] = modeList[key].label
          } else if (key === 'imageInfo') { // 图示和实例是数组和后端保持一致
            this.form[key] = modeList[key]
          } else {
            if (Array.isArray(modeList[key])) { // 是数组类型
              let scope = this
              modeList[key].forEach((item, index) => { // 数组对象转以分号分割的字符串
                let newVal = item.label ? item.label : item.name
                if (index === modeList[key].length - 1) { // 最后一项不加分号
                  scope.form[key] += newVal
                } else {
                  scope.form[key] += newVal + ';'
                }
              })
            } else { // 其他
              this.form[key] = modeList[key]
            }
          }
        }
      }
    },
    getAgeList (str) { // 适用年龄转换
      let newStr = ''
      if (this.$route.query.id) { // 详情
        let listArr = []
        let newArr = str.split(';')
        newArr.forEach((item, index) => {
          let s = item.split('-')
          if (!s[0]) {
            listArr.push(Number(s[1]) + 1 + '岁以下')
          } else if (!s[1]) {
            listArr.push(s[0] - 1 + '岁以上')
          } else if (s[0] === '0' && s[1] === '9999') {
            listArr.push('全年龄段')
          } else {
            listArr.push(item + '岁')
          }
        })
        newStr = listArr.join('；')
      } else { // 预览
        newStr = str
      }
      return newStr
    },
    getNumList (str) { // 学员规模转换
      let newStr = ''
      if (this.$route.query.id) { // 详情
        let s = str.split('-')
        let listArr = []
        if (!s[0]) {
          listArr.push(s[1] + '人以下')
        } else if (!s[1]) {
          listArr.push(s[0] + '人以上')
        } else {
          listArr.push(str + '人')
        }
        newStr = listArr.join('；')
      } else {
        newStr = str
      }
      return newStr
    },
    handleClosePage () { // 关闭窗口
      window.close()
      localStorage.removeItem('mode_list')
    },
    revereSportType: function (val) { // 获取运动类型
      let typeText = val
      if (this.mode_sport_list && this.mode_sport_list.length > 0) {
        this.mode_sport_list.forEach((item) => {
          if (item.fieldValue === val) {
            typeText = item.fieldName
          }
        })
      }
      return typeText
    },
    handleGoBack () { // 返回
      this.$router.go(-1)
    },
    handleSetYes () { // 审核通过
      api.setYesAudit({id: this.form.id}, {options: this, successMsg: '已通过审核'}).then((res) => {
        this.getData()
      })
    },
    handleSetNo () { // 拒绝审核
      api.setNoAudit({id: this.form.id}, {options: this, successMsg: '已拒绝审核'}).then((res) => {
        this.getData()
      })
    },
    handleResubmit () { // 重新提交
      api.setResubmitAudit({id: this.form.id}, {options: this, successMsg: '已重新提交'}).then((res) => {
        this.getData()
      })
    },
    handleDeLete () {
      this.$confirm('删除后将不可恢复，确认删除该训练方式吗？', '温馨提示', {type: 'warning'}).then(() => {
        api.addTrainStyle({id: this.form.id}, {context: this, type: 'DELETE', successMsg: '删除成功'}).then((res) => {
          this.$router.go(-1)
        })
      })
    },
    handleDetail () { // 编辑
      this.$router.push({path: '/training/trainingprogram/mode/add', query: {id: this.form.id}})
    }
  }
}
</script>

<style lang="scss" scoped>
.addmode_form{
  margin:30px 0 0 0;
  .el-tag{
    margin: 0 5px 0 0;
  }
  .el-tag--primary{
    background-color: rgba(32,160,255,.1);
    border-color: rgba(32,160,255,.2);
    color: #20a0ff;
  }
  .line_fg{
    line-height:1px;
    height:1px;
    background:#e3e3ec;
    margin: 50px 0;
  }
  .input-number-range{
    width:120px;
  }
  .heading-2{
    margin:35px 0;
  }
  .img_card{
    border-radius:4px;
    border:1px solid #e3e3ec;
    padding:10px;
    width:95%;
  }
  .el-carousel__item{
    .slide_img{
      border:1px solid #e3e3ec;
      img{
        vertical-align:middle;
      }
    }
  }
}
</style>
<style lang="scss">
.addmode_form{
  .custom-group-wrapper{
    margin-top:10px;
    .xcheckbox-item .xsmall{
      width:95%!important;
    }
  }
  .stud_num{
    .el-form-item__label{
      padding:13px 12px 13px 0;
    }
  }
}
.imgcard_dialog{
  .el-dialog--small{
    width:860px;
  }
}
.img_cardlist{
  margin-bottom:10px;
  padding-bottom:30px;
  border-bottom:1px solid #e3e3ec;
  position:relative;
  .img_btn{
    position:absolute;
    right:5px;
    bottom:-15px;
    font-size:12px;
  }
  .el-carousel__button{
    width:10px;
  }
}
</style>
